<template>
    <p>counter = {{ $store.state.counter}}</p>
    <p>{{counter}}</p>
    <p> count={{ $store.getters.getCounter }}</p>
    <p>{{ getCounter }}</p>
    <button @click="addClickHandle">增加</button>
    <button @click="addAsyncClickHandle">异步增加</button>
</template>
<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(["counter"]),
        ...mapGetters(["getCounter"])
    },
    methods: {
        ...mapMutations(["addCounter"]),
        ...mapActions(["asyncAddCounter"]),
        addClickHandle() {
            // 固定调用方式
            // this.$store.commit("addCounter",15)
            this.addCounter(20)
        },
        addAsyncClickHandle() {
            // this.$store.dispatch("asyncAddCounter");
            this.asyncAddCounter();
        }
    }
}
</script>